@import '../../../core/index.less';

.ori-retextfield-root {
    margin-bottom: 20 / @remScale;
    position: relative;
    border: 1/@rem solid @borderColor;
    border-radius: 4/@remScale;
    overflow: hidden;
    .input::-webkit-input-placeholder,
    .textarea::-webkit-input-placeholder {
        color: @pinkish-darken-gray;
        font-weight: 300;
    }
    //.length-limit {
    //    position: absolute;
    //    bottom: 20%;
    //    right: 10/@remScale;
    //    font-size: 12/@remScale;
    //    color: @black-auxiliary;
    //}
    .prefix-text {
        padding-left: 10/@remScale;
        display: flex;
        color: @pinkish-grey;
        font-size: 14/@remScale;
        align-items: center;
        &.black {
            color: @mainColor;
        }
    }
    .required {
        display: flex;
        color: #f00;
        align-items: center;
        background: @white;
        padding: 0 10/@remScale 0 20/@remScale;
        @media (max-width: @max1) {
            padding: 0 10/@remScale 0 15/@remScale;

        }
    }
    .icon-wrapper {
        height: 100%;
        background-color: @white;
        padding-left: 10/@remScale;
        user-select: none;
        border-radius: 4/@remScale;
        .clear-value {
            height: 100%;
            display: flex;
            align-items: center;
            .tip-length {
                font-size: 12/@remScale;
                color: @pinkish-grey;
                margin-right: 3/@remScale;
            }
            .clear-icon {
                color: @border-color;
                width: 20/@remScale;
                height: 20/@remScale;
                cursor: pointer;
                margin-right: 10/@remScale;
                font-size: 12/@remScale;
                &:hover {
                    color: @light-blue-color;
                }
                @media (max-width: @max1) {
                    &:hover {
                        color: @border-color;
                    }

                    &:active {
                        color: @light-blue-color;
                    }
                }
            }
            .text-limit {
                margin-right: 10/@remScale;
                font-size: 12/@remScale;
                color: @black-auxiliary;
            }
        }
    }
    &.focus {
        border: 1/@rem solid @border-hover-color;
    }
    &:hover {
        border: 1/@rem solid @border-hover-color;
    }
    .label {
        display: inline-block;
        vertical-align: middle;
        width: 100 / @remScale;
        line-height: 42 / @remScale;
        text-align: left;
    }
    .input,
    .textarea {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        font-size: 14 /@remScale;
        border-radius: 4 / @remScale;
        -webkit-appearance: none;
        color: @mainColor;
        padding: 0 0 0 10/@remScale;
        resize: none;
        font-family: PingFang SC;
    }
    .read-only{
        cursor: auto;
    }
    .textarea {
        height: 90 / @remScale;
        padding: 10 / @remScale 10 / @remScale;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 5/@remScale;
        }
        &::-webkit-scrollbar-thumb {
            background-color: #A6A6A6;
            border-left: 2/@remScale solid transparent;
        }
        &::-webkit-scrollbar-track {
            background-color: #E5E5E5;
            border-left: 2/@remScale solid transparent;
        }
    }
    .err-text {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 0;
        margin-left: 10px;
        color: @errorColor;
        line-height: 42px;
        font-size: 14 / @remScale;
        svg {
            vertical-align: -2 / @remScale;
            width: 14/ @remScale;
            height: 14/ @remScale;
        }
    }
    .success-text {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 0;
        margin-left: 10px;
        color: @successColor;
        line-height: 42px;
        font-size: 16 / @remScale;
        svg {
            vertical-align: -2 / @remScale;
        }
    }
    &.err-box {
        border-color: @errorColor;
        &:focus {
            box-shadow: none;
        }
    }
    &.full-width {
        display: flex;
        .input,
        .textarea {
            flex: 1;
            min-width: 0;
        }
    }
    &.is-label {
        border: 0;
        .input,
        .textarea {
            border: 1/@remScale solid @border-color;
            height: calc(~"100% - 2px");
            &:hover {
                border: 1/@rem solid @mainColor;
            }
            &:focus {
                border: 1/@rem solid @mainColor;
            }
        }
        .icon-wrapper {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            margin-right: 1/@remScale;
            height: calc(~"100% - 2px");
        }
    }
}

.theme-dark {
    .ori-retextfield-root {
        label {
            display: inline-block;
            vertical-align: middle;
            width: auto;
            height: @dark_textFieldHeight;
            line-height: @dark_textFieldHeight;
            text-align: center;
            background-color: @dark_bgHighlightColor2;
            border-top-left-radius: 4/@remScale;
            border-bottom-left-radius: 4/@remScale;
            color: @dark_fontColor;
            padding: 0 8/@remScale;
        }
        input {
            width: 50 / @remScale;
            height: @dark_textFieldHeight;
            text-align: left;
        }
        input,
        textarea {
            border: none;
            background-color: @dark_bgColor;
            color: @dark_fontHighlightColor;
            padding: 5 / @remScale 10 / @remScale;
        }
        label + input {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            text-align: center;
            padding: 0 5/@remScale;
        }
        textarea {
            height: auto;
            min-height: 50/@remScale;
        }
    }
}
